import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:netease_music/main.dart';
import 'package:netease_music/playService.dart';
import 'package:provider/provider.dart';

class PlayProvider extends ChangeNotifier {
  bool _isPop = false;

  bool get isPop => _isPop;

  void changePopState() {
    _isPop = !_isPop;
    notifyListeners();
  }
}

class DoPlayControl extends StatelessWidget {
  const DoPlayControl({super.key});

  @override
  Widget build(BuildContext context) {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Container(
        height: 80,
        alignment: Alignment.center,
        color: Colors.white.withOpacity(0.6),
        margin: const EdgeInsets.symmetric(horizontal: 0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: MouseRegion(
                cursor: playService.state() == CurrentPlayerState.Play
                    ? SystemMouseCursors.click
                    : SystemMouseCursors.forbidden,
                child: GestureDetector(
                  onTap: () {
                    var isPop = context.read<PlayProvider>().isPop;
                    if (!isPop) {
                      context.push('/yyy');
                      context.read<PlayProvider>().changePopState();
                    }
                  },
                  child: SizedBox(
                    height: 50,
                    width: 50,
                    child:
                        context.watch<CurrentProvider>().currentItem.imageUrl ==
                                ''
                            ? SvgPicture.asset(
                                'assets/svg/music.svg',
                                height: 50,
                                width: 50,
                              )
                            : Image.network(
                                context
                                    .watch<CurrentProvider>()
                                    .currentItem
                                    .imageUrl,
                                fit: BoxFit.cover,
                              ),
                  ),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 5),
              child: Row(
                children: [
                  IconButton(
                      onPressed: () {
                        context.read<CurrentProvider>().playPrevious();
                      },
                      icon: const Icon(
                        Icons.skip_previous_outlined,
                        size: 30,
                      )),
                  IconButton(
                      onPressed: () {
                        if (player.isPuase()) {
                          player.resume();
                        }
                        if (player.isPlaying()) {
                          player.pause();
                        }
                      },
                      icon: Icon(
                        context.watch<CurrentProvider>().currentIcon,
                        size: 30,
                      )),
                  IconButton(
                      onPressed: () {
                        context.read<CurrentProvider>().playNext();
                      },
                      icon: const Icon(
                        Icons.skip_next_outlined,
                        size: 30,
                      )),
                ],
              ),
            ),
            Expanded(
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Column(
                  children: [
                    Text(
                      context.watch<CurrentProvider>().currentItem.name,
                      style: TextStyle(
                          fontFamily: 'mi_bold',
                          foreground: Paint()..color = Colors.pinkAccent,
                          overflow: TextOverflow.ellipsis,
                          shadows: const [
                            Shadow(
                                color: Colors.green,
                                offset: Offset(1, 1),
                                blurRadius: 1),
                          ],
                          fontSize: 18),
                    ),
                    SliderAndTime(
                      key: UniqueKey(),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class SliderAndTime extends StatelessWidget {
  const SliderAndTime({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
            flex: 4,
            child: SliderTheme(
              data: const SliderThemeData(
                  trackHeight: 1.0,
                  thumbColor: Colors.pinkAccent,
                  thumbShape: RoundSliderThumbShape(
                      enabledThumbRadius: 1,
                      pressedElevation: 1,
                      elevation: 1,
                      disabledThumbRadius: 1)),
              child: Slider(
                  mouseCursor: SystemMouseCursors.click,
                  value: double.parse(
                      '${context.watch<CurrentProvider>().currentItem.duration}'),
                  min: 0,
                  max: double.parse(
                      '${context.watch<CurrentProvider>().currentItem.totalDuration}'),
                  onChanged: (s) {
                    // print(context
                    //     .watch<CurrentProvider>()
                    //     .currentItem
                    //     .totalDuration);
                    context.read<CurrentProvider>().updatePosition(s.toInt());
                    context
                        .read<CurrentProvider>()
                        .seekForDuration(Duration(seconds: s.toInt()));
                  }),
            )),
        Expanded(
          flex: 1,
          child: Padding(
            padding: const EdgeInsets.only(right: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Text(
                  '${Duration(seconds: context.watch<CurrentProvider>().currentItem.duration).inMinutes}'
                  ':${context.watch<CurrentProvider>().currentItem.duration % 60}',
                ),
                IconButton(
                    onPressed: () {},
                    icon: SvgPicture.asset(
                        height: 20, width: 20, 'assets/svg/recycle.svg')),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
